<template>
  <div class="main-page list-page el-card">
    <transition name="fade">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="项目月报" name="first">
          <div v-tabs-animated>
            <MonthReport :activeYear="activeYear" :activeName="activeName" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="费用汇总" name="second">
          <div v-tabs-animated>
            <CostAggregate :activeYear="activeYear" :activeName="activeName" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </transition>
    <div class="pro-year">
      项目年度:
      <div
        v-for="item in yearList"
        :key="item"
        class="pro-year-item"
        :class="{ active: item === activeYear }"
        @click="activeYear = item"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getProjectYear } from "/@/api/reportManager";
import MonthReport from "../c-comp/monthReport.vue";
import CostAggregate from "../c-comp/costAggregation.vue";

const activeName = ref("first");
const yearList = ref([]);
const activeYear = ref("");

onMounted(() => {
  queryProjectYear();
});

const queryProjectYear = async () => {
  const res = await getProjectYear();
  yearList.value = res.data;
  activeYear.value = yearList.value[0];
};

const handleClick = () => {
  activeYear.value = yearList.value[0];
};
</script>
<style scoped lang="scss">
.main-page {
  position: relative;
}
.demo-tabs {
  height: 100%;
  ::v-deep .el-tabs__content {
    height: 100% !important;
  }
}
::v-deep .el-tabs__nav-scroll {
  padding: 0 20px !important;
}

.el-tab-pane {
  padding: 0 20px !important;
}

// 开始到结束两个过程
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
// 开始状态 和 最终状态
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.pro-year {
  position: absolute;
  top: 11px;
  right: 0px;
}

.pro-year {
  display: flex;

  .pro-year-item {
    width: 80px;
    height: 32px;
    padding: 5px 16px;
    background: #f5f6fa;
    box-sizing: border-box;
    border: 1px solid #d3d9e6;
    position: relative;
    top: -8px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
  }

  .active {
    background: #e6f2ff;
    border: 1px solid #0073e5;
    color: #0073e5;
  }
}
</style>
